<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
</head>
<body>
  <script>
    /* 
    1. 哪里用await: 一般在结果为promise的表达式左侧
        如果await 右侧表达式结果不是promise, 直接得到这个结果
    2. 哪里用async: 离await最近的函数定义的左侧

    成功的value: await左侧以级下面的代码都是在成功之后执行(相当于在成功的回调中执行)
    失败的reason: 使用try...catch中在失败后执行(相当于在失败的回调中执行)

    调用async函数的得到是一个promise对象, promise的结果由aysnc函数体执行的结果决定(与.then类似)
    */

    /* 
    async函数执行返回一个promise
    promse的状态由 async函数体执行的结果 决定    ==> 与then返回的promise类似
    await下面的代码是在成功的回调中执行
    catch下的代码是在失败的回调中执行

    async函数返回的promise的结果状态由什么决定?  由async函数体执行的结果决定
    */
    const getProduct = async () => {
      try {
        const response = await axios.get('/1_js基础/product2.json') 
        // 成功回调中执行
        console.log(response.data)
        return response.data
      } catch (error) {  // 失败的回调
        console.log(error)
        return undefined
      }
    }

    const getProduct2 = () => {
      return axios.get('/1_js基础/product2.json').then(
        (response) => {
          console.log(response.data)
          return response.data
        },
        (error) => {
          console.log(error)
          // return undefined
          // return 123
        }
      )
    }

  
    async function test() {
      const result = await getProduct2()
      console.log('result', result) // undefined

      const result2 = await 4  // 异步返回成功promise的value值
      console.log(result2) // ?
    }

    // test()

    async function fn3() {
      const result = await 5
      console.log('result', result)
    }

    fn3()
    console.log('fn3()之后')

  </script>
</body>
</html>